<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SpringBoot-超级文件带师</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入样式 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.0/theme-chalk/index.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.14.0/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
    <script type="text/javascript" src="//unpkg.com/wangeditor/dist/wangEditor.min.js"></script>
</head>
<body>
    <div id="content">
        <el-card class="box-card" style="max-width: 300px;">
            <div style="display: flex;flex-direction: column;justify-content: center;align-items: flex-start;">
                <span style="margin: 10px;">文件夹编号:</span>
                <el-input v-model="form.id" autocomplete="off"></el-input>
            </div>
            <div style="display: flex;flex-direction: column;justify-content: center;align-items: flex-start;">
                <span style="margin: 10px;">文件夹编号2:</span>
                <el-input v-model="form.id2" autocomplete="off"></el-input>
            </div>
            <div style="display: flex;flex-direction: column;justify-content: center;align-items: flex-start;">
                <span style="margin: 10px;">姓名所在参数行:</span>
                <el-input v-model="form.where" autocomplete="off"></el-input>
            </div>
            <div style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
                <el-button @click="getData" type="primary" icon="el-icon-search" circle style="margin: 10px;"></el-button>
            </div>

        </el-card>
        <h1>未交名单：</h1>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="name"
                        label="姓名"
                        >
                </el-table-column>
                <el-table-column
                        prop="_class"
                        label="班级"
                        >
                </el-table-column>
                <el-table-column
                        prop="dmt"
                        label="宿舍">
                </el-table-column>
                <el-table-column
                        prop="wechat"
                        label="微信">
                </el-table-column>
            </el-table>
        <h1>已交名单：</h1>
        <el-table
                :data="tableData2"
                style="width: 100%">
            <el-table-column
                    prop="name"
                    label="姓名"
            >
            </el-table-column>
            <el-table-column
                    prop="_class"
                    label="班级"
            >
            </el-table-column>
            <el-table-column
                    prop="dmt"
                    label="宿舍">
            </el-table-column>
            <el-table-column
                    prop="wechat"
                    label="微信">
            </el-table-column>
        </el-table>
    </div>

    <script>
        var app = new Vue({
            el: '#content',
            data: {
                form:{
                    id:"",
                    id2:"",
                    where:""
                },
                tableData:[],
                tableData2:[]
            },
            mounted:function(){
                this.form.id = this.getUrlParam("id");
                this.form.id2 = this.getUrlParam("id2");
                this.form.where = this.getUrlParam("where");
                this.getData();
            },
            methods:{
                getUrlParam:function(name){
                    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                    var r = window.location.search.substr(1).match(reg);
                    if (r != null) return unescape(r[2]); return null;
                },
                getData:function(){
                    axios.get('Dir_getNotHandList',{
                        params: {
                            id:this.form.id,
                            id2:this.form.id2,
                            where:parseInt(this.form.where)-1
                        }
                    })
                        .then(res => {
                            console.log('数据是:', res);
                            app.tableData=res.data.data.noHand;
                            app.tableData2=res.data.data.Hand;
                        })
                        .catch((e) => {
                            console.log('获取数据失败');
                        });
                },
                goto:function(item){
                    window.open('upload.html?id='+item.id);
                },
            }
        })
    </script>
</body>
</html>